<template>
  <div>
    <el-dialog v-model="addConfig.visible" :title="addConfig.title" width="600px">
      <div class="basicSet">
        <div>
          <span class="title">机器人名称</span>
          <el-input style="width: 300px;" placeholder="请输入机器人名称" v-model.trim="addConfig.robotName"></el-input>
        </div>
        <div class="setContent">
          <span class="title">服务账号</span>
          <el-select style="width: 300px;" v-model="addConfig.accountId" multiple>
            <el-option
              v-for="item in accountList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <p class="tip">渠道有多个机器人时，将接入最新创建的机器人</p>

        </div>
        <div class="setContent">
          <span class="title">回复类型</span>
          <el-select style="width: 300px;" v-model="addConfig.msgType" multiple>
            <el-option
              v-for="item in messageType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <template #footer>
        <div>
          <el-button @click="close">取消</el-button>
          <el-button @click="saveAddBot" type="primary">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive} from "vue"
import {
  add_keyword_auto_reply_robot
} from "@/api/settingtApi";
import { get_robot_binding_account_list } from "@/api/dropDown";

import {ElMessage} from "element-plus";
const addConfig = reactive({
  title: "新增机器人",
  visible: false,
  robotName: "",
  accountId: [],
  msgType: []
})
const accountList = ref([])
const messageType = ref([
  {value: 1, label: '私信'},
  {value: 2, label: '评论'},
  {value: 3, label: '进入聊天框'},
])
const close = () => {
  addConfig.visible = false
}
const open = () => {
  getAccountList()
  addConfig.robotName = ""
  addConfig.accountId = []
  addConfig.msgType = []
  addConfig.visible = true
}
const getAccountList = () => {
  get_robot_binding_account_list().then((res) => {
    accountList.value = res.data || []
    if(res.data.length) {
      addConfig.accountId = [res.data[0].value]
    }
  })
}

const emits = defineEmits("successAddBot")
const saveAddBot = () => {
  if(!addConfig.robotName) {
    ElMessage.warning('请输入名称!')
    return
  }
  if(!addConfig.accountId.length) {
    ElMessage.warning('请选择服务账号!')
    return
  }
  if(!addConfig.msgType.length) {
    ElMessage.warning('请选择回复类型!')
    return
  }
  let accountId = addConfig.accountId.join(',')
  let msgType = addConfig.msgType.join(",")
  add_keyword_auto_reply_robot({
    useStatus: 1,
    robotName: addConfig.robotName,
    useAccount: accountId,
    msgType
  }).then(res => {
    ElMessage.success(res.msg)
    emits("successAddBot")
    close()
  })
}
defineExpose({open})
</script>

<style scoped lang="scss">
.basicSet{
  padding: 20px;
  &>div {
     margin: 30px 20px;
    .tip {
      margin: 20px 0 20px 70px;
      color: $fontSizeColor;
    }
  }
}
.title {
  display: inline-block;
  text-align: right;
  margin-right: 10px;
  width: 60px;
}
</style>